
<header class="main-header">
    <!-- Logo -->
    <a href="/" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>外卖</b></span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>外卖管理后台</b></span>
    </a>
    <!-- Logo -->

    <!-- 头部导航 start-->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- 左边菜单切换按钮 start-->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>
        <!-- 左边菜单切换按钮 end-->

        <!-- 头部导航 右边项 start-->
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <!-- 用户账户 start -->
                <li class="dropdown user user-menu">
                    <!-- Menu Toggle Button -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <!-- The user image in the navbar-->
                        <img src="__STATIC__/admin/img/avatar4.png" class="user-image" alt="User Image">
                        <!-- hidden-xs hides the username on small devices so only the image appears. -->
                        <span class="hidden-xs">{$admin.nick}</span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- The user image in the menu -->
                        <li class="user-header">
                            <img src="__STATIC__/admin/img/avatar4.png" class="img-circle" alt="User Image">
                            <p>
                                {$admin.nick}
                            </p>
                        </li>

                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="#" id="btn-changePassword" onclick="changePassword()" class="btn btn-default btn-flat">修改密码</a>
                            </div>
                            <div class="pull-right">
                                <a href="#" id="btn_logout"  class="btn btn-default btn-flat">退出系统</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- 用户账户 end -->

                <!-- Control Sidebar Toggle Button -->
                <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>
            </ul>
        </div>
        <!-- 头部导航 右边项 end-->
    </nav>
    <!-- 头部导航 end-->
</header>

<!-- 右边控件滑动框 start -->
<aside class="control-sidebar control-sidebar-light">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li class="active"><a href="#control-sidebar-layout-tab" data-toggle="tab"><i class="fa fa-desktop"></i></a></li>
        <li><a href="#control-sidebar-skins-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- 布局设置 tab content -->
        <div class="tab-pane active" id="control-sidebar-layout-tab">
            <h4 class="control-sidebar-heading">布局设置</h4>
            <div class="form-group">
                <label class="control-sidebar-subheading"><input type="checkbox" data-layout="fixed" class="pull-right" />固定布局</label>
                <p>激活固定布局,当设置为固定布局时，不能使用盒装布局。</p>
            </div>
            <div class="form-group">
                <label class="control-sidebar-subheading"><input type="checkbox" data-layout="layout-boxed" class="pull-right" />盒装布局</label>
                <p>激活盒装布局。</p>
            </div>
            <div class="form-group">
                <label class="control-sidebar-subheading"><input type="checkbox" data-layout="sidebar-collapse" class="pull-right" /> 菜单栏切换</label>
                <p>切换菜单栏的状态。</p>
            </div>
            <div class="form-group">
                <label class="control-sidebar-subheading"><input type="checkbox" data-enable="expandOnHover" class="pull-right" /> 菜单栏展开</label>
                <p>当菜单项为mini状态时，菜单展开显示。</p>
            </div>
            <div class="form-group">
                <label class="control-sidebar-subheading"><input type="checkbox" data-controlsidebar="control-sidebar-open" class="pull-right" />工具栏切换</label>
                <p>切换工具栏显示效果，是推出或复盖。</p>
            </div>
            <div class="form-group">
                <label class="control-sidebar-subheading"><input type="checkbox" data-sidebarskin="toggle" class="pull-right" />工具栏样式</label>
                <p>工具栏样式,黑色或者白色。</p>
            </div>
        </div>
        <!-- /.布局设置 tab-pane -->

        <!-- 样式 tab content -->
        <div class="tab-pane" id="control-sidebar-skins-tab">
            <h4 class="control-sidebar-heading">界面样式</h4>
            <ul class="list-unstyled clearfix">
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span>
                            <span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin">Blue</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                            <span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span>
                            <span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin">Black</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span>
                            <span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin">Purple</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span>
                            <span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin">Green</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span>
                            <span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin">Red</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span>
                            <span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin">Yellow</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span>
                            <span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Blue Light</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                            <span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span>
                            <span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Black Light</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span>
                            <span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Purple Light</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span>
                            <span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Green Light</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span>
                            <span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Red Light</p>
                </li>
                <li style="float:left; width: 33.33333%; padding: 5px;">
                    <a href="javascript:void(0);" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span>
                            <span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span>
                        </div>
                        <div>
                            <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span>
                            <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
                        </div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px;">Yellow Light</p>
                </li>
            </ul>
        </div>
        <!-- /.样式 tab-pane -->
    </div>
</aside>
<!-- 右边控件滑动框 end -->
<div class="control-sidebar-bg"></div>